<template>
	<view class="container">
		<uni-card>
			<view class="xd-card" @click="clickCreate">
				<view style="width: 98%;">新开卡</view>
			</view>
		</uni-card>
		<uni-section title="管理套卡" type="line">
			<uni-card v-for="(item,index) in cards">
				<view class="xd-card" @click="clickCard(index)">
					<view class="card-title">{{item.title}}</view>
				</view>
			</uni-card>
		</uni-section>
	</view>
</template>

<script>
	import * as manageApi from "@/api/manage.js"
	export default {
		data() {
			return {
				cards: [{
					title: '甜童屋订奶卡'
				}]
			}
		},
		onLoad: function(option) {
			this.getlist()
		},
		methods: {
			getlist() {
				manageApi.list({
					page: '1'
				}).then(res => {
					this.cards = res.data.list
				})
			},
			clickCard(index) {
				console.log(index, this.cards[index])
				uni.navigateTo({
					url: '../card/card?templateId='+this.cards[index].id
				})
			},
			clickCreate() {
				uni.navigateTo({
					url: '../create/create'
				})
			}
		}
	}
</script>

<style lang="scss">
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.container {
		background-color: #fff;
	}

	.xd-card {
		@include flex;
		height: 200rpx;
		align-items: center;
		text-align: center;
		font-size: 46rpx;
		font-weight: 700;

		.card-title {
			width: 73%;
		}

		.card-sum {
			color: seagreen;
		}
	}
</style>
